<template>
  <view class="page custom-page">
    <custom-head gradient back title="班级管理"> </custom-head>
    <view class="class">
      <view class="class_item flex u-col-center u-p-35" v-for="item in classList" @click="handleEditd(item)">
        <u-image width="98rpx" height="98rpx" radius="50%" :src="item.avatar"></u-image>
        <view class="u-flex-1 u-flex-col u-m-l-32">
          <text class="class_name">{{ item.name }}</text>
          <text class="time">{{ item.desc }}</text>
        </view>
        <view class="right flex a-center">
          <text class="number">{{ item.num }}人</text>
          <u-icon name="arrow-right" color="#8F9399" size="28"></u-icon>
        </view>
      </view>
    </view>
    <view class="bottom_btn_box">
      <u-button type="primary" shape="circle" @click="toPage('/pages/class/create')">创建班级</u-button>
    </view>
  </view>
</template>

<script>
import { unix } from 'dayjs'
import { getClass } from '../../api/modules/class'
import { toPage } from '../../utils/index.js'

export default {
  data() {
    return {
      classList: [],
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },
  onShow() {  // 页面显示就会执行这个函数
    this._getClass({
      page_no: 1,
      page_size: 10000,
    })
  },

  // mounted() {
  //   this._getClass({
  //     page_no: 1,
  //     page_size: 10000
  //   })
  //   // this._glbgetClass();
  // },

  methods: {
    toPage,
    handleEditd(params) {
      uni.navigateTo({
        url: `/pages/class/create?id=${params.id}`
      })
    },

    _glbgetClass() {
      this.classList = this.glbClass
    },
    _getClass(data) {
      getClass(data).then((res) => {
        // console.log('数据获取',  res)
        this.classList = res.data.list.filter(i => i.sid === this.glbId).map(i => ({...i, avatar: `${this.static_uri}${i.avatar}`}))
      })
    }
  }
}
</script>

<style scoped lang="scss">
.class {
  padding-bottom: 100rpx;

  .class_item {
    background-color: #fff;
    margin-bottom: 20rpx;

    .class_name {
      color: #040709;
      font-weight: bold;
      font-size: 32rpx;
    }

    .time {
      color: #606265;
      font-size: 24rpx;
    }

    .right {
      font-size: 22rpx;

      .number {
        margin-right: 12rpx;
      }
    }
  }
}

.img {
  width: 160rpx !important;
  height: 160rpx !important;
  border-radius: 50%;
}
</style>
